<template>
  <div class="video-container" @mouseenter="showControls = true" @mouseleave="showControls = false">
    <!-- 视频播放器 -->
    <video ref="videoPlayer" class="video-player" :src="videoUrl" @click="togglePlay" @timeupdate="handleTimeUpdate"
      @play="handlePlay" @pause="handlePause"></video>

    <!-- 悬浮播放按钮 -->
    <div v-show="!isPlaying || showControls" class="floating-controls">
      <el-button color="#626aef" :icon="isPlaying ? VideoPause : VideoPlay" circle class="play-button"
        @click.stop="togglePlay" />
    </div>

    <!-- 控制栏 -->
    <!-- <div class="video-controls"> -->
    <!-- 播放/暂停按钮 -->
    <!-- <el-button
          :icon="isPlaying ? VideoPause : VideoPlay"
          circle
          @click="togglePlay"
        /> -->

    <!-- 进度条 -->
    <!-- <el-slider style="width:50%;"
          v-model="currentTime"
          :max="duration"
          :format-tooltip="formatTime"
          @input="seekVideo"
        /> -->

    <!-- 时间显示 -->
    <!-- <span class="time-display">
          {{ formatTime(currentTime) }} / {{ formatTime(duration) }}
        </span> -->

    <!-- 音量控制 -->
    <!-- <el-slider
            v-model="volume"
            :max="1"
            :step="0.1"
            class="volume-slider"
/> -->

    <!-- 全屏按钮 -->
    <!-- <el-button
          :icon="FullScreen"
          circle
          @click="toggleFullScreen"
        /> -->
    <!-- </div> -->
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, onUnmounted } from 'vue'
import { VideoPlay, VideoPause, FullScreen } from '@element-plus/icons-vue'

const props = defineProps({
  videoUrl: String,
  autoplay: {  // 新增自动播放属性
    type: Boolean,
    default: false
  }
})
const videoPlayer = ref<HTMLVideoElement | null>(null)
const isPlaying = ref(false)
const currentTime = ref(0)
const duration = ref(0)
const volume = ref(1)
// 新增控制显示变量
const showControls = ref(false)
// 格式化时间显示（00:00）
const formatTime = (seconds: number) => {
  const minutes = Math.floor(seconds / 60)
  const remainingSeconds = Math.floor(seconds % 60)
  return `${String(minutes).padStart(2, '0')}:${String(remainingSeconds).padStart(2, '0')}`
}

// 播放/暂停切换
const togglePlay = () => {
  if (!videoPlayer.value) return
  isPlaying.value ? videoPlayer.value.pause() : videoPlayer.value.play()
}

// 进度条拖动
const seekVideo = (value: number) => {
  if (videoPlayer.value) {
    videoPlayer.value.currentTime = value
  }
}
console.log(props.autoplay)
// 监听 autoplay 变化
watch(() => props.autoplay, (newVal) => {
  if (newVal && videoPlayer.value) {
    videoPlayer.value.play().catch(e => {
      console.error("自动播放失败:", e)
    })
  } else if (videoPlayer.value) {
    videoPlayer.value.pause()
  }
})

// 全屏切换
const toggleFullScreen = () => {
  if (!videoPlayer.value) return
  if (document.fullscreenElement) {
    document.exitFullscreen()
  } else {
    videoPlayer.value.requestFullscreen()
  }
}

// 初始化视频元数据
onMounted(() => {
  if (videoPlayer.value) {
    videoPlayer.value.addEventListener('loadedmetadata', () => {
      duration.value = videoPlayer.value!.duration
      volume.value = videoPlayer.value!.volume
    })
  }
})

// 事件处理
const handleTimeUpdate = () => {
  if (videoPlayer.value) {
    currentTime.value = videoPlayer.value.currentTime
  }
}

const handlePlay = () => {
  isPlaying.value = true
}

const handlePause = () => {
  isPlaying.value = false
}

// 组件卸载时暂停视频
onUnmounted(() => {
  if (videoPlayer.value) {
    videoPlayer.value.pause()
    videoPlayer.value.currentTime = 0
  }
})
</script>

<style scoped>
.video-container {
  position: relative;
  max-width: 100%;
  margin: 0 auto;

  /* 鼠标悬停时显示控制元素 */
  &:hover .floating-controls {
    opacity: 1;
  }
}

.video-player {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  cursor: pointer;
}

/* 悬浮控制层 */
.floating-controls {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.3);
  transition: opacity 0.3s;
  opacity: 0;
  /* 默认隐藏 */

  /* 播放按钮样式 */
  .play-button {
    width: 60px;
    height: 60px;
    font-size: 24px;
    /* 默认状态 */
    background-color: rgba(255, 255, 255, 0.2);
    /* 半透明白背景 */
    border-color: rgba(255, 255, 255, 0.8);
    /* 白色边框 */

    /* 图标颜色 */
    color: rgba(255, 255, 255, 0.9);
    /* 白色图标 */
    /* border: 2px solid white; */

    &:hover {
      background-color: #e85623;
      ;
      border-color: #e85623;
      color: #fff;
    }

    /* 点击状态 */
    &:active {
      background-color: #e85623;
    }
  }
}

.video-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 0 0 8px 8px;
}

.time-display {
  color: white;
  font-size: 14px;
}

.volume-slider {
  /* 横向布局核心样式 */
  width: 100px;
  /* 控制滑块宽度 */
  height: 30px;
  /* 控制滑块高度 */

  /* 可选样式 */
  margin-left: 10px;

  /* 与其他控件的间距 */
  :deep(.el-slider__runway) {
    margin: 0;
    /* 去除默认外边距 */
  }

  /* 如果使用 Element Plus 2.3.8+ */
  :deep(.el-slider__button) {
    width: 14px;
    height: 14px;
  }
}
</style>


